import React, {Component} from 'react';
import {
    HeaderWrapper, HeaderLogo, HeaderTips, HeaderSearch, HeaderAccount,
    HeaderRegister, HeaderLogin, HeaderSplit, HeaderCenterWrapper
} from "./HomeHeaderStyle";

import {connect} from 'react-redux';
import {Link} from "react-router-dom";
import {actionCreator} from "./store";
import LoginComponent from "./LoginComponent";
import RegisterComponent from "./RegisterComponent";


class HomeHeader extends Component {

    constructor(props) {
        super(props);
        this.clickLogin = this.clickLogin.bind(this);
        this.clickRegister = this.clickRegister.bind(this);
    }

    render() {
        return (
            <HeaderWrapper>
                <HeaderCenterWrapper>
                    <HeaderLogo/>
                    <HeaderTips>
                        {
                            this.props.headerList.map((item, index) => {
                                let clsName;
                                if (index === this.props.currentIndex) {
                                    clsName = 'tipsLink current';
                                } else {
                                    clsName = 'tipsLink';
                                }
                                return (
                                    <li
                                        key={item.get("id")}
                                        className={"tips"}>
                                        <Link
                                            className={clsName}
                                            to={item.get("link")}
                                            onClick={() => {
                                                this.props.updateTitleIndex(index);
                                            }}
                                        >{item.get("title")}</Link>
                                    </li>
                                );
                            })
                        }

                    </HeaderTips>

                    <HeaderAccount>
                        <HeaderRegister onClick={this.clickRegister}>注册</HeaderRegister>
                        <HeaderSplit>·</HeaderSplit>
                        <HeaderLogin onClick={this.clickLogin}>登录</HeaderLogin>
                    </HeaderAccount>
                    <HeaderSearch/>
                </HeaderCenterWrapper>
                {this.props.showLoginView ? <LoginComponent/> : null}
                {this.props.showRegisterView ? <RegisterComponent/> : null}
            </HeaderWrapper>
        );
    };


    clickLogin() {
        if (!this.props.showLoginView) {
            this.props.updateLoginAndRegisterState(true, false);
        }
    }

    clickRegister() {
        if (!this.props.showRegisterView) {
            this.props.updateLoginAndRegisterState(false, true);
        }
    }
}

//分发的数据
const mapState = (state) => {

    return {
        headerList: state.getIn(["headerReducer", "headerList"]),
        currentIndex: state.getIn(["headerReducer", "currentIndex"]),
        showLoginView: state.getIn(["headerReducer", "showLoginView"]),
        showRegisterView: state.getIn(["headerReducer", "showRegisterView"]),
    };
};

//需要处理的数据
const mapDisPatch = (dispatch) => {
    return {
        updateTitleIndex(index) {
            const action = actionCreator.updateTitleIndex(index);
            dispatch(action);
        }, updateLoginAndRegisterState(lState, rState) {
            const action = actionCreator.updateLoginAndRegisterState(lState, rState);
            dispatch(action);
        }
    };
};

export default connect(mapState, mapDisPatch)(HomeHeader);
